<template>
    <div>
        <van-nav-bar title="站点详情" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="container">
        <div class="detail-div-one">
            <div style="background-color: white;height: 100px;width: 97%;" @click="StationDetailPage()">
                <van-space :align="align">
                    <div style="height: 48px; width: 200px;">
                        <h4 style="margin-top: 3px;margin-bottom: 3px">广州天河体育西共享充电站</h4>
                        <div style="display: flex;">
                            <img style="height: 20px;" alt="Vue logo" src="../../images/24hours.png">
                            <div style="margin-left: 3px;"> 小时 | 非专用</div>
                        </div>
                    </div>
                    <div style="height: 48px; width: auto;background-color: white;padding-top: 5px">
                        <div style="color: blue;font-weight: bolder;font-size: 18px;">1.6000元/度</div>
                        <div style="color: lightgray;font-weight: bold;font-size: 14px;text-decoration: line-through;">
                            1.8000元/度</div>
                    </div>
                </van-space>
                <div style="display: flex;height: 20px;">
                    <div style="background-color: red;">空：18</div>
                    <div style="background-color: cyan;">共：20</div>
                </div>
                <div class="station-footer" style="display: flex;margin-bottom: 5px;padding-top: 10px;">
                    <div style="margin-left: 3px;font-size: 12px;"> 广州市天河区天河南路1781号</div>
                    <div style="display: flex;margin-left:auto;margin-right: 0%;">
                        <div style="text-align: right;"> 3.3Km</div>
                        <!-- <img style="height: 20px;" src="../../images/guid.png"> -->
                    </div>
                </div>
            </div>
        </div>
        <div class="detail-div-two">
            <img style="height: 80px;width: 97%;margin-bottom: ;" src="../../images/station.jpg" alt="">
        </div>
        <div class="detail-div-three">
            <div class="detail-div-three-left">
                <div style="font-size: 14px;">
                    <div>
                        <span style="background-color: burlywood;color: rgb(255, 255, 255);">T</span>
                        <span>营业时间：</span>
                        <span>00:00-24:00</span>
                    </div>
                    <div>
                        <span style="background-color: aqua;">P</span>
                        <span>停车费用：</span>
                        <span>按场地方收费标准进行收费</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="detail-div-four">
            <van-tabs v-model:active="active">
                <van-tab title="详情"></van-tab>
                <van-tab title="终端"></van-tab>
                <van-tab title="评论"></van-tab>
            </van-tabs>
            <van-divider />
            <div class="detail-content-div">
                <span style="font-size: 18px;font-weight: bold;">电站简介</span><br>
                <span>&nbsp;&nbsp;&nbsp;&nbsp;在中国电动汽车充电站的发展是必然的，抢占先机也是企业的制胜之道。在当下，国家虽有大力倡导，各企业又蠢蠢欲动，但电动汽车走入寻常百姓家不是短期内容易做到的。国家政策可以给（购车补偿、上路等），而电动汽车充电站网则无法短期建，主要原因是给电动汽车快速充电需要瞬时强大的功率电力，常规电网无法满足，必须要建专用充电网络，这涉及整个国家电网改造，国家电网大改造不是小事，耗资巨大，从讨论、立项到成网，非一朝一夕能实现。

                    能较好的解决快速充电问题的方案是-换电站-利用给汽车更换电池的方法代替漫长的充电过程。一辆汽车需要配备两块电池，当一块电池用完后自动切换到另一块，此时可到换电站将用完的电池换下，装上满电的电池。而换下的电池由电站统一充电和维护，前提是充电站要有相当数量的备用电池。这个方法优点是快速，用户换完电池就可以上路，比加油都快。用这种方法再加上停车场充电桩等辅助手段，相信电动汽车的普及就近在眼前。
                </span>
            </div>
        </div>
        
        <div class="detail-div-five">
            <van-tabbar v-model="active">
                <van-tabbar-item icon="star-o" @click="Collect()">收藏</van-tabbar-item>
                <van-tabbar-item icon="share-o" @click="Share()">分享</van-tabbar-item>
                <van-tabbar-item icon="column" @click="Opt()">操作指南</van-tabbar-item>
            </van-tabbar>

        </div>
    </div>
</template>
<script setup>
const onClickLeft = () => history.back();

function Collect(){
    console.info('收藏功能')
}
function Share(){
    console.info('分享')
}
function Opt(){
    console.info('操作指南')
}
</script>

<style>
.van-nav-bar__title {
    font-weight: lighter;
}

.container {
    background-color: lightgray;
}


.detail-div-one {
    margin-left: 10px;
    margin-top: 10px;
    margin-right: 10px;
    padding-left: 3px;
    background-color: white;
}

.detail-div-two {
    padding-left: 10px;
    padding-top: 5px;
}

.detail-div-three {
    margin-left: 10px;
    margin-top: 5px;
    margin-right: 10px;
    display: flex;
    background-color: white;
}

.detail-div-four {
    margin-left: 10px;
    margin-top: 5px;
    margin-right: 10px;
    background-color: white;
}
.detail-content-div{
    padding-left: 10px;
}
</style>